<template>
  <template v-for="(item, num) in childData" :key="num">
    <!-- 非末级菜单 -->
    <el-sub-menu v-if="item.isLast == '0' && item.isStop == '0'" :index="item.routerPath">
      <template #title>
        <template v-if="item.menuIcon">
          <yu-icon :iconName="item.menuIcon"></yu-icon>
        </template>
        <template v-else>
          <yu-icon iconName="xitong"></yu-icon>
        </template>
        <span>{{ item.menuName }}</span>
      </template>
      <yu-child-menu :childData="item.children"></yu-child-menu>
    </el-sub-menu>
    <!-- 末级菜单 -->
    <el-menu-item v-else-if="item.isLast == 1 && item.isStop == 0" :index="item.routerPath" :key="num" @click="topath(item.routerPath)">
      <template v-if="item.menuIcon">
        <yu-icon :iconName="item.menuIcon"></yu-icon>
      </template>
      <template v-else>
        <yu-icon iconName="xitong" />
      </template>
      <template #title> {{ item.menuName }}</template>
    </el-menu-item>
  </template>
</template>

<script setup>
  import { ref, getCurrentInstance, onMounted, toRef } from 'vue';
  import { useStore } from 'vuex';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const topath = path => {
    router.push(path);
  };
  const props = defineProps({
    childData: {
      default: [],
      type: Array,
    },
  });
  const childData = toRef(props, 'childData');
  const handleOpen = (key, keyPath) => {
    console.log(key, keyPath);
  };
  const handleClose = (key, keyPath) => {
    console.log(key, keyPath);
  };
</script>
<style lang="scss" scoped>
  .svg-icon {
    width: 1em;
    height: 1em;
    font-size: 18px;
    vertical-align: middle;
    margin-right: 5px;
    width: var(--el-menu-icon-width);
    text-align: center;
  }
</style>
